<template>
  <view>
    <view class="top">
      <view class="bottom">
        <view class="left">收货人</view>
        <input placeholder="请填入收货人姓名" v-model="name" />
      </view>
      <view class="bottom">
        <view class="left">手机号码</view>
        <input placeholder="请填入收货手机号码" v-model="phone" />
      </view>
      <view class="bottom">
        <view class="left">地区</view>
        <!-- <input placeholder="请填入收货手机号码" /> -->
        <!-- <view> -->
        <pickerAddress @change="changeAddress" class="right" v-model="area">{{ area }}</pickerAddress>
        <!-- </view> -->
      </view>
      <view class="bottom">
        <view class="left">详细地址</view>
        <!-- <view class="right">街道、楼牌号等</view> -->
        <input placeholder="街道、楼牌号等" v-model="addressDetail" />
      </view>
      <!-- <label class="radio">
        <radio :color="roleColor" value="1" />
        默认地址
      </label> -->
    </view>
    <button @tap="submit">保存地址</button>
  </view>
</template>

<script>
  import pickerAddress from '../../components/wangding-pickerAddress/wangding-pickerAddress.vue'
  export default {
    data() {
      return {
        // selectaddress: '',
        name: "",
        phone: "",
        area: "点击选择",
        addressDetail: "",
      }
    },
    components: {
      pickerAddress
    },

    methods: {
      changeAddress(data) {
        // console.log(data)
        this.area = data.data.join('') // 这段就是显示我们选择省市区的文字信息
      },
      submit() {
        // console.log("@@@")
        // console.log(this.name)
        const that = this
        uni.request({
          url: getApp().globalData.baseUrl + '/insertAddress',
          method: 'post',
          data: {
            name: that.name,
            userId: uni.getStorageSync("userId"),
            phone: that.phone,
            area: that.area,
            addressDetail: that.addressDetail,
          },
          header: {
            "Content-Type": "application/x-www-form-urlencoded"
          },
          success(res) {
            // console.log(that.area)
            // console.log(res)
            uni.navigateTo({
              url: "/pages/my/address"
            })
          }
        })
      },

    }

  }
</script>

<style>
  .top {
    margin: 40rpx 20rpx 10rpx 20rpx;
    border: white 10rpx solid;
    border-radius: 10rpx;
    background-color: white;
  }

  .bottom {
    display: flex;
    justify-content: flex-start;
    margin: 40rpx 40rpx 0 40rpx;
    padding-bottom: 20rpx;
    border-bottom: #c5c5c5;
    border-width: 0 0 2rpx 0;
    border-style: solid;
  }

  .bottom .left {
    width: 180rpx;
  }

  /*  .bottom .right {
    color: #c5c5c5;
  }
 */
  button {
    border-radius: 60rpx;
    width: 80%;
    background-color: black;
    color: white;
  }
</style>